<template>
  <view class="content">
    <view class="title">
      <text class="iconfont icon-shop"></text>
      <text>优购生活馆</text>
    </view>
    <!-- 商品列表 -->
    <view class="goods-list">
      <view
        class="goods-item"
        v-for="(item, index) in goodsList"
        :key="index"
        @click="toItem(item.goodsId)"
      >
        <text
          class="iconfont"
          :class="item.checked ? 'icon-checked' : 'icon-uncheck'"
          @click.stop="toggleCheck(item)"
        ></text>
        <image :src="item.goods_small_logo" alt="" />
        <view class="right">
          <text class="text-line2">{{ item.goods_name }}</text>
          <view class="btm">
            <text class="price"
              >￥<text>{{ item.goods_price }}</text
              >.00</text
            >
            <view class="goods-num">
              <button @click.stop="sub(item)" :disabled="item.num === 1">
                -
              </button>
              <text>{{ item.num }}</text>
              <button @click.stop="add(item)">+</button>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="account">
      <view class="select-all">
        <text
          class="iconfont"
          :class="isAll ? 'icon-checked' : 'icon-uncheck'"
          @click="toggleCheckAll"
        ></text>
        <text>全选</text>
        <view class="price-wrapper">
          <view class="price">
            <text
              >合计:<text class="num">￥{{ totalPrice }}.00</text></text
            >
            <view class="info">包含运费</view>
          </view>
          <view class="account-btn" @click="toPay">结算({{ totalNum }})</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data () {
    return {
      goodsList: []
    }
  },
  watch: {
    // 监听goodsList的改变
    goodsList: {
      handler () {
        // 这里获取到的变化就是goodsList
        // console.log(newVal)
        // 把goodsList更新storage cart;
        // goodslist已经有我们需要更新到storage cart里面的所有数据
        this.$store.commit('updateCart', this.goodsList)
      },
      deep: true
    }
  },
  computed: {
    // 总数量
    totalNum () {
      // 遍历所有的商品，把勾选的商品数量相加
      return this.goodsList.reduce((sum, item) => {
        return sum + (item.checked ? item.num : 0)
      }, 0)
    },
    totalPrice () {
      // 总价格=所有勾选的商品数量*商品价格之和
      return this.goodsList.reduce((sum, item) => {
        return sum + (item.checked ? item.num * item.goods_price : 0)
      }, 0)
    },
    isAll: {
      get () {
        return this.goodsList.every(item => {
          return item.checked
        })
      },
      // 全选的状态设置给所有的商品
      set (status) {
        // console.log(status)
        this.goodsList.forEach(item => {
          item.checked = status
        })
      }
    }
  },
  onShow () {
    // 初次进行购物车,或者后续切换到购物车页面,获取最新的storage数据
    this.cart = this.$store.getters.getCart
    this.queryGoodsList()
    // 为购物车设置右上角添加文本
    wx.setTabBarBadge({
      index: 2,
      text: this.cart.length + ''
    })
  },
  methods: {
    // 跳转支付页
    toPay () {
      // 判断商品数量,如果为0,提示
      if (!this.totalNum) {
        wx.showToast({
          title: '请选择商品,再结算',
          icon: 'none'
        })
        return
      }
      // 如果没有登录态,就跳转
      let token = wx.getStorageSync('token')
      if (!token) {
        wx.navigateTo({
          url: '/pages/login/main'
        })
        // 如果没有return后面的语句还会执行
        return
      }
      // 跳转支付页
      wx.navigateTo({
        url: '/pages/pay/main'
      })
    },
    // 跳转商品详情
    toItem (goodsId) {
      wx.navigateTo({
        url: '/pages/item/main?goodsId=' + goodsId
      })
    },
    // 全选点击
    toggleCheckAll () {
      this.isAll = !this.isAll
    },
    // 商品勾选/不勾选
    toggleCheck (item) {
      item.checked = !item.checked
    },
    // --
    sub (item) {
      item.num--
    },
    // ++
    add (item) {
      item.num++
    },
    // 查询购物车中商品列表
    async queryGoodsList () {
      let idsArr = this.cart.map(item => {
        return item.goodsId
      })
      let idsStr = idsArr.join(',')
      // 如果storage购物车为空,不请求
      if (!idsStr) {
        return
      }

      let _goodsList = await this.$request({
        url: '/api/public/v1/goods/goodslist?goods_ids=' + idsStr
      })

      // _goodsList是无序的
      // 合并_goodslist和cart,以cart为主
      this.goodsList = this.cart.map(item => {
        // 在goodsList里面找一个对象的goodsId也等于item.goodsId
        let targetGoods = _goodsList.find(goods => {
          return goods.goods_id === item.goodsId
        })
        return { ...item, ...targetGoods }
      })
    }
  }
}
</script>

<style lang="less">
.iconfont {
  font-size: 44rpx;
}

.title {
  height: 88rpx;
  display: flex;
  align-items: center;

  .iconfont {
    color: #999;
    margin: 6rpx 12rpx 0 32rpx;
  }
}

.goods-item {
  height: 206rpx;
  background-color: #fff;
  border-top: 1rpx solid #ddd;
  display: flex;
  box-sizing: border-box;
  align-items: center;

  .iconfont {
    color: #eb4450;
    margin: 0 30rpx;
  }

  image {
    width: 160rpx;
    height: 160rpx;
  }

  .right {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 0 20rpx 0 18rpx;

    .btm {
      display: flex;
      margin-top: 40rpx;
      justify-content: space-between;

      .price {
        color: #eb4450;

        > text {
          font-size: 24px;
        }
      }

      .goods-num {
        display: flex;
        align-items: center;

        button {
          width: 60rpx;
          height: 50rpx;
          box-sizing: border-box;
          display: flex;
          justify-content: center;
          align-items: center;
          border: 4rpx solid #666;
        }

        text {
          margin: 0 30rpx;
        }
      }
    }
  }
}

.goods-list {
  position: absolute;
  bottom: 98rpx;
  top: 88rpx;
  width: 100%;
  overflow: auto;
  padding-bottom: 60rpx;
  background-color: #f4f4f4;
}

.account {
  height: 98rpx;
  border-bottom: 1rpx solid #ddd;
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  align-items: center;

  .iconfont {
    color: #eb4450;
    margin: 0 30rpx;
  }

  .account-btn {
    width: 230rpx;
    height: 98rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-color: #eb4450;
  }

  .select-all {
    flex: 1;
    display: flex;
    align-items: center;

    .price-wrapper {
      display: flex;
      flex: 1;
      justify-content: flex-end;
      align-items: center;
    }
  }

  .price {
    margin-right: 20rpx;

    .num {
      color: #eb4450;
    }

    .info {
      color: #999;
    }
  }
}
</style>
